<?php
/*
 * flexbox align items to bottom
 * boton action -> fill boxes, trigger
 * saldo, lento falta su letrero
 * printer title en chrome+
 * drop down color reordenarlo
 * pasar autocomplete a selectize para multiple
 * cambar a multiple, = a IN
 * ocultar flechas en: all,tiene
 *
 * No es urgente al final producto o producto/color Apartada o necesita autorizacion para sacarla a quien esta reservada a quien le pide autorizacion
 * por telefono existencias y grid de salidas para ti
 * mobile: ver existencias, ver salidas le corresponden, autorizar salidas
 */
function catalogToSelect(string $cual):string {
    $ret = [];
    $catalog = json_decode(obtenCatalogo('bodega'), true);
    foreach($catalog as $c) {
        $ret[] = "<option value='$c[real_value]'>" . ia_htmlentities($c['label']) . "</option>";
    }
    return implode("", $ret);
}
// return <<< 'CODE_DIALOGO_EXISTENCIAS'
?>
<!--suppress CssUnusedSymbol -->
    <style>
        .radioLabelOnly {display:none;padding:0;margin:0;}
        .radioLabelOnly:hover {color:darkblue}
    .dialogo_existencia_flexRow {display:flex}
        .printOnly {display:none}
        @media print {
             thead {display: table-header-group; border:1px solid silver}
             thead th { border:1px solid silver;font-weight: bold;color:black}
             thead td { border:1px solid silver;font-weight: bold;color:black}
            .noprint {display:none}
            .printOnly {display:table-row}
            #tabla_consulta_existencia caption {display: none}
            .tabla_consulta_existencia {border:1px solid silver}
            .totalizador_openClose {display:none}

        }
    .unidad {font-family: monospace, monospace; visibility:hidden}
    
    .totalizador_casset_boton {
        padding:0.5em;margin-left:0;margin-right:0;box-shadow: none ;
        font-size:1.2em;
        color:blue;border:1px solid blue;cursor:pointer}
        .totalizador_casset_boton:hover {color:darkblue;border:1px solid darkblue;background-color: whitesmoke}

    TR.totalizador_subTotal {}
    TR.totalizador_subTotal1 {
        background-color: #C0C0C0;
        border-bottom: 2px solid #a3a4a5;
    }
    TR.totalizador_subTotal2 {
        background-color: #F0F0F0;
        border-bottom: 2px solid #a3a4a5;
    }
    TR.totalizador_subTotal3 {
        background-color: #E0E0E0;
        border-bottom: 2px solid #a3a4a5;
    }
        TR.totalizador_subTotal4 {
        background-color: #D0D0D0;
        border-bottom: 2px solid #a3a4a5;
    }
    .der {text-align: right}
    .cen {text-align: center}
    .izq {text-align: left}
        .totalizador_table{border-collapse:collapse; }
        
        .totalizador_table th{ vertical-align:top;text-align:center;padding:1em;/*border-radius:7px;*/}
        .totalizador_table td{ text-align:left;vertical-align:top;padding:1em;font-weight:normal;}
        
        .totalizador_table th.izq{text-align:left;}
        .totalizador_table th.cen{text-align:center;}
        .totalizador_table th.der{text-align:right;}
        
        .totalizador_table td.izq{text-align:left;}
        .totalizador_table td.cen{text-align:center;}
        .totalizador_table td.der{text-align:right;}

        /** estos los usa el codigo */
        .totalizador_numero {color:red}
        .totalizador_negativo {color:red}
        .totalizador_pointer {cursor:pointer;}
        .totalizador_level_menu {cursor:pointer;color:#060606; text-decoration:underline;text-decoration-style:dashed}
        .totalizador_openClose {color:green;padding-right:0.5em}

        .totalizador_subTotalLabel {font-weight:bolder;}
        .totalizador_subTotalValue {font-weight:bolder;font-family: monospace, monospace;}

        .totalizador_gran_total_above {color:black;border-bottom:8px double black;font-weight:bold;font-family: monospace, monospace;text-align:right}
        .totalizador_gran_total_below {color:black;border-top:8px double black;font-weight:bold;font-family: monospace, monospace;text-align:right}


        .en_remate {padding-right:0.5em;color:purple}
        .es_saldo {padding-right:0.5em;color:purple}
        .lento {padding-right:0.5em;color:blue;}
        .super_lento {padding-right:0.5em;color:blue}
    </style>
    <!--suppress JSAssignmentUsedAsCondition -->
    <script>
    function totalizadorToggleGroup(element, level) {
        let elementOpenMarker = element.getElementsByClassName("totalizador_openClose"), isClosed=false, prevClosed=false;
        if(elementOpenMarker.length) {
            elementOpenMarker[0].innerHTML = elementOpenMarker[0].innerHTML === '▼' ? '▶' : '▼';
            prevClosed = isClosed = elementOpenMarker[0].innerHTML === '▶';
        }
        let el = element.parentElement;        
        while (el = el.nextSibling) {
            if(el.dataset.level <= level)
                break;
            let marker = el.getElementsByClassName("totalizador_openClose"),
                isDataRow = marker.length === 0;
            if(isClosed) {
                el.style.display = "none";
                continue;
            }
            if(isDataRow) {
               el.style.display =  prevClosed ? "none" : "";
               continue;
            }
            prevClosed = marker[0].innerHTML === '▶';
            el.style.display = "";
        }
    }
    function showLevel(level) {
        $('#tabla_consulta_existencia tbody').children('TR').each(function () {
            let thisLevel = this.dataset.level, marker = this.getElementsByClassName("totalizador_openClose");
            
            this.style.display = typeof thisLevel !== 'undefined' && level >= thisLevel ? "" : "none";
            if(marker.length > 0)
                marker[0].innerHTML = level <= thisLevel ? '▶' : '▼';
        });
    }
    function showAll() {
        $('#tabla_consulta_existencia tbody').children('TR').each(function(){
            this.style.display = "";
            let marker = this.getElementsByClassName("totalizador_openClose");
            if(marker.length > 0)
                marker[0].innerHTML = '▼';        
        });
    }
</script>
<!--suppress ES6ConvertVarToLetConst -->
    <script>
    var bodegas=[],productos_generales_dialog=[],colores_dialog=[];
    $(function () {dialogConsultarExistencia.init();});

    const dialogConsultarExistencia = {
        version: 'UI', // [HTML, UI]

        consultaExistenciaTomaInputs: function() {
            if($("#dialog_bodega").val().trim() === '')
                $('#dialog_bodega_id').val('');
            if($("#dialog_producto").val().trim() === '')
                $('#dialog_producto_id').val('');
            if($("#dialog_color").val().trim() === '')
                $('#dialog_color_id').val('');
        },
        pdf: function() {

        },
        print:function() {
            $("#dialogo_existencias_print_area").printThis({
                debug: false,               // show the iframe for debugging
                importCSS: true,            // import parent page css
                importStyle: true,         // import style tags
                printContainer: false,       // print outer container/$.selector
                loadCSS: "",                // path to additional css file - use an array [] for multiple
                pageTitle: $("#consultaExistenciaProducto").dialog('option', 'title'),              // add title to print page
                removeInline: false,        // remove inline styles from print elements
                removeInlineSelector: "*",  // custom selectors to filter inline styles. removeInline must be true
                printDelay: 666,            // variable print delay erea 333
                header: null,               // prefix to html o null
                footer: null,               // postfix to html o null / (new Date()).toDateString()
                base: false,                // preserve the BASE tag or accept a string for the URL
                formValues: true,           // preserve input/form values
                canvas: false,              // copy canvas content
                doctypeString: '...',       // enter a different doctype for older markup
                removeScripts: false,       // remove script tags from print content
                copyTagClasses: false,      // copy classes from the html & body tag
                beforePrintEvent: null,     // function for printEvent in iframe
                beforePrint: null,          // function called before iframe is filled
                afterPrint: null            // function called before iframe is removed
            });
        },
        allChanged:function() {
            if($("#dialogo_existencia_todo").is(":checked")) {
                $("#dialog_existencia_grupo").val('');
                $("#dialog_bodega").val('');
                $('#dialog_bodega'+ '_id').val('');
                $("#dialog_producto").val('');
                $('#dialog_producto'+ '_id').val('');
                $("#dialog_color").val('');
                $('#dialog_color'+ '_id').val('');
                $("#dialogo_existencia_saldo").prop('checked', false);
                $("#dialogo_existencia_lento").prop('checked', false);
            }
            dialogConsultarExistencia.consultaExistencia();
        },

        grupoChanged:function() {
            let grupo = $("#dialog_existencia_grupo").val().trim();
            if(grupo !== '') {
                $("#dialog_bodega").val('');
                $('#dialog_bodega'+ '_id').val('');
                $("#dialogo_existencia_todo").prop('checked', false);
            }
            dialogConsultarExistencia.consultaExistencia();
        },

        init: function () {
            if (dialogConsultarExistencia.version === 'UI') {
                $('#consultaExistenciaProducto').dialog({
                    autoOpen: false,
                    modal: false,
                    width: 1240,
                    height: 790,
                    draggable: true,
                    resizable: true,
                    title: 'Consulta Existencia de Producto',
                    open: function() {
                        $("#dialog_existencia_grupo").val('');
                        $('#dialog_bodega_id').val('');
                        $('#dialog_producto_id').val('');
                        $('#dialog_color_id').val('');
                        $('#icon_clean_bodega')._hide();
                        $('#icon_clean_producto')._hide();
                        $('#icon_clean_color')._hide();
                        $("#dialog_producto").focus();
                    },
                    close: function() {
                        dialogConsultarExistencia.hide();
                    }
                });
            }

            $("#dialogo_existencia_todo").prop('checked', false).off('change',dialogConsultarExistencia.allChanged).on('change',dialogConsultarExistencia.allChanged);
            $("#dialogo_existencia_lento").prop('checked', false).off('change',dialogConsultarExistencia.consultaExistencia).on('change',dialogConsultarExistencia.consultaExistencia);
            $("#dialogo_existencia_saldo").prop('checked', false).off('change',dialogConsultarExistencia.consultaExistencia).on('change',dialogConsultarExistencia.consultaExistencia);
            $("INPUT[name='dialogo_existencia_orden_color']").off('change',dialogConsultarExistencia.consultaExistencia).on('change',dialogConsultarExistencia.consultaExistencia);
            $("INPUT[name='dialogo_existencia_casset']").off('change',dialogConsultarExistencia.botonesCasset).on('change',dialogConsultarExistencia.botonesCasset);
            $("#dialog_existencia_grupo").prop('checked', false).off('change',dialogConsultarExistencia.grupoChanged).on('change',dialogConsultarExistencia.grupoChanged);
        
            var request = {
                url: window.location.origin + '/' +  window.location.pathname.split('/')[1] + '/backoffice/ajax/catalogos_acciones.php',
                data: {
                    accion: 'obtenCatalogo',
                    catalogo: ['producto_general', 'color', 'bodega'],
                    genera: true,
                    customAutocomplete: true,
                },
            };
            jqAjax(request, (response) => {
                bodegas=response.catalogos.bodega;
                productos_generales_dialog = response.catalogos.producto_general;
                colores_dialog = response.catalogos.color;

                $d.initAutoComplete('#dialog_bodega', response.catalogos.bodega, '#dialog_bodega_id', (bodega) => {
                    dialogConsultarExistencia.consultaExistencia();
                });
                $d.initAutoComplete('#dialog_producto', response.catalogos.producto_general, '#dialog_producto_id', (producto) => {
                    dialogConsultarExistencia.consultaExistencia();
                });
                $d.initAutoComplete('#dialog_color', response.catalogos.color, '#dialog_color_id', (color) => {
                    dialogConsultarExistencia.consultaExistencia();
                });
            });
            $("#dialog_bodega").on("blur", dialogConsultarExistencia.consultaExistenciaTomaInputs);
            $("#dialog_producto").on("blur", dialogConsultarExistencia.consultaExistenciaTomaInputs);
            $("#dialog_color").on("blur", dialogConsultarExistencia.consultaExistenciaTomaInputs);
        },

        show: function () {
            if (dialogConsultarExistencia.version === 'UI') {
                $('#close_dialog_existencia_producto').hide();
                $('#title_dialog_existencia_producto').hide();
                $( "#consultaExistenciaProducto" ).dialog( "open" );
                return;
            }
            $('#consultaExistenciaProducto').height(500).draggable()[0].showModal();
            $('#close_dialog_existencia_producto').click(() =>{ dialogConsultarExistencia.hide(); });
        },

        hide: function () {
            $("#dialog_color").val('');
            $("#dialog_color_id").val('');
            $("#dialog_producto").val('');
            $("#dialog_producto_id").val('');
            $("#dialog_bodega").val('');
            $("#dialog_bodega_id").val('');
            
            dialogConsultarExistencia.consultaExistencia(
                $('#dialog_bodega_id').val().trim(),
                $('#dialog_producto_id').val().trim(),  
                $('#dialog_color_id').val().trim()
            );
            
            if (dialogConsultarExistencia.version === 'UI') {
                $('#consultaExistenciaProducto').dialog('close');
            } else {
                var existenciasDialog = document.getElementById('consultaExistenciaProducto');
                existenciasDialog.close();
            }
        },

        botonesCasset: function(forza = false) {
            var grupo =  $("#dialog_existencia_grupo").val().trim(),
                bodega_id =  $('#dialog_bodega_id').val().trim(),
                producto_general_id =  $('#dialog_producto_id').val().trim(),
                color_id=  $('#dialog_color_id').val().trim(),
                lento = $("#dialogo_existencia_lento").is(":checked"),
                saldo = $("#dialogo_existencia_saldo").is(":checked"),
                todo = $("#dialogo_existencia_todo").is(":checked")
            btn = $("input[name='dialogo_existencia_casset']:checked").prop('checked', false).val();

            if(!forza && grupo === '' && bodega_id === '' && producto_general_id === '' && color_id === '' &&  !saldo && !lento && !todo ) {
                $('#tabla_consulta_existencia caption').html("Seleccione la bodega, el producto y/o color a consultar" );
                $("#consultaExistenciaProducto").dialog( "option", "title", "Consulta Existencia de Producto");
                $('#tabla_consulta_existencia tbody').html('');
                $('#totales').html('');
                $('#dialog_existencia_footer').html('');
                return;
            }

            if(grupo !== '' || bodega_id !== '' || producto_general_id !== '' || color_id !== '' ||  saldo || lento) {
                $("#dialogo_existencia_todo").prop('checked', false);
                todo = false;
            }

            $.ajax({
                url: window.location.origin + '/' +  window.location.pathname.split('/')[1] + '/backoffice/ajax/existencia_acciones.php',
                metnod:'get',
                cache:false,
                dataType:'json',
                data: {
                    accion: 'consultarExistenciasBotonesDo',
                    grupo: grupo,
                    bodega_id: bodega_id,
                    producto_general_id: producto_general_id,
                    color_id: color_id,
                    saldo:saldo ? '1' : '',
                    lento: lento ? '1' : '',
                    todo: todo ? '1' : '',
                    'orden_color': $("input[name='dialogo_existencia_orden_color']:checked").val(),
                    groupBy: $("#dialogo_existencia_swap").data('group'),
                    btn : todo ? '': btn
                }
            }).done(function(data, textStatus, jqXHR) {
                console.log("botones got", data);
            })
            .fail(function(jqXHR, textStatus, errorThrown) {

            }).always(function(data, textStatus, jqXHR) { //data|jqXHR, textStatus, jqXHR|errorThrown

            });

            },

        consultaExistencia: function (forza=false) {
            var grupo =  $("#dialog_existencia_grupo").val().trim(),
             bodega_id =  $('#dialog_bodega_id').val().trim(),
             producto_general_id =  $('#dialog_producto_id').val().trim(),
             color_id=  $('#dialog_color_id').val().trim(),
             lento = $("#dialogo_existencia_lento").is(":checked"),
             saldo = $("#dialogo_existencia_saldo").is(":checked"),
             todo = $("#dialogo_existencia_todo").is(":checked")
             ;

            if(!forza && grupo === '' && bodega_id === '' && producto_general_id === '' && color_id === '' &&  !saldo && !lento && !todo ) {
                $('#tabla_consulta_existencia caption').html("Seleccione la bodega, el producto y/o color a consultar" );
                $("#consultaExistenciaProducto").dialog( "option", "title", "Consulta Existencia de Producto");
                $('#tabla_consulta_existencia tbody').html('');
                $('#totales').html('');
                $('#dialog_existencia_footer').html('');
                return;
            }

            if(grupo !== '' || bodega_id !== '' || producto_general_id !== '' || color_id !== '' ||  saldo || lento) {
                $("#dialogo_existencia_todo").prop('checked', false);
                todo = false;
            }
            $('#label_consultando_existencia').html('Buscando existencia ...');
            var request = {
                url: window.location.origin + '/' +  window.location.pathname.split('/')[1] + '/backoffice/ajax/existencia_acciones.php',
                data: {
                    accion: 'consultarExistenciaParaDialogoTotalizado',
                    grupo: grupo,
                    bodega_id: bodega_id,
                    producto_general_id: producto_general_id,
                    color_id: color_id,
                    saldo:saldo ? '1' : '',
                    lento: lento ? '1' : '',
                    todo: todo ? '1' : '',
                    'orden_color': $("input[name='dialogo_existencia_orden_color']:checked").val(),
                    groupBy: $("#dialogo_existencia_swap").data('group'),
                }
            };

            jqAjax(request, (response) => {
//                console.log("existencia", response.query);

                var
                    bodega=$("#dialog_bodega").val().trim(),
                    producto=$("#dialog_producto").val().trim(),
                    color=$("#dialog_color").val().trim(),
                    grupo=$("#dialog_existencia_grupo").val().trim(),
                    caption = ("<b>" + producto + " " + color).trim() + "</b>",
                    lento = $("#dialogo_existencia_lento").is(":checked")
                ;
                if (bodega)
                    $('#icon_clean_bodega')._show();
                if (producto)
                    $('#icon_clean_producto')._show();
                if (color)
                    $('#icon_clean_color')._show();

                if(producto === '' && color !== '')
                    caption = ' Color: ' + caption;  
                if($("#dialogo_existencia_saldo").is(":checked")) {
                    if(lento)
                        caption = "<b>Saldos</b> y <b>Lentos</b> " + caption; 
                    else
                        caption = "<b>Saldos</b> " + caption;
                } else if(lento)
                    caption = "<b>Lentos</b> " + caption;     

                if(grupo.length && grupo !== "''")
                    caption += " En <b>" + grupo + "</b> ";
                if(bodega === '' && grupo === "''")
                    caption += ', en todas las bodegas';
                
                if(bodega !== '')
                    if($("#dialog_producto").val() === '' && $("#dialog_color").val() === '')
                        caption += 'Bodega: <b>' + bodega + '</b>';  
                    else                 
                        caption += ', en la Bodega: <b>' + $("#dialog_bodega").val() + '</b>';
                
                if($("#dialogo_existencia_todo").is(":checked"))
                    caption = "All";

                $("#consultaExistenciaProducto").dialog(
                    "option", "title", "Existencias de: " + caption.replaceAll('<b>', '').replaceAll('</b>', '') );
                $('#tabla_consulta_existencia caption').html( caption );
                $("#dialog_existencia_th_title").html(caption + " <span style='font-size:0.7em;font-weight:100;'>" + response.ahora + ", " + response.usr + "</span>");
                $('#tabla_consulta_existencia tbody').html(response.totalizado);
                $('#totales').html(`<td></td>
                        <td class="totalizador_gran_total_above">${$.fmatter.util.NumberFormat(response.totales.existencia_rollos, $.jgrid.formatter.integer)}</td>
                        <td class="totalizador_gran_total_above">${$.fmatter.util.NumberFormat(response.totales.existencia_quantity, $.jgrid.formatter.number)}</td>`);

                $('#dialog_existencia_footer').html(`
                <tr>
                    <td class="izq">
                    <td class="totalizador_gran_total_below">${$.fmatter.util.NumberFormat(response.totales.existencia_rollos, $.jgrid.formatter.integer)}</td>
                    <td class="totalizador_gran_total_below">${$.fmatter.util.NumberFormat(response.totales.existencia_quantity, $.jgrid.formatter.number)}</td>`);
                showLevel(2);
            });
        },

        limpiar: function (idInput = null) {
            if (idInput !== null) {
                $("#" + idInput).val('').trigger('change');
                $('#'+idInput+ '_id').val('');
                if (idInput === 'dialog_bodega')
                    $('#icon_clean_bodega')._hide();                
                if (idInput === 'dialog_producto')
                    $('#icon_clean_producto')._hide();
                if (idInput === 'dialog_color')
                    $('#icon_clean_color')._hide();
                dialogConsultarExistencia.consultaExistencia();
            }
        },
        
        reGroupBy: function() {
            let bodegaProducto = "<span class='totalizador_level_menu' onClick='showLevel(1)'>Bodega</span> / <span class='totalizador_level_menu' onClick='showLevel(2)'>Producto</span> / <span class='totalizador_level_menu' onClick='showAll()'>Color</span>";
            let productoColor = "<span class='totalizador_level_menu' onClick='showLevel(1)'>Producto</span> / <span class='totalizador_level_menu' onClick='showLevel(2)'>Color</span> / <span class='totalizador_level_menu' onClick='showAll()'>Bodega</span>";
            let productoBodega = "<span class='totalizador_level_menu' onClick='showLevel(1)'>Producto</span> / <span class='totalizador_level_menu' onClick='showLevel(2)'>Bodega</span> / <span class='totalizador_level_menu' onClick='showAll()'>Color</span>";
            let $swap = $("#dialogo_existencia_swap"), era=$swap.text();
            let $ordena = $("#dialogo_existencia_ordena");
            switch(era) {
                case '⦽':
                    $swap.html("⬰").attr('title','Cambia a totales por Bodega / Producto / Color').data('group', ['producto','bodega',  'color']);
                    $ordena.html(productoBodega);
                    break;
                case '⬰':
                    $swap.html('⇴').attr('title','Cambia a totales por Producto / Color / Bodega').data('group', ['bodega', 'producto', 'color']);
                    $ordena.html(bodegaProducto);
                    break;
                case '⇴':
                    $swap.html("<span style='font-size:0.5em'>⦽</span>").attr('title','Cambia a totales por  Producto  / Bodega/ Color').data('group',['producto', 'color', 'bodega']);
                    $ordena.html(productoColor);
                    break;

            }
            dialogConsultarExistencia.consultaExistencia();
        }
    };
    Object.freeze(dialogConsultarExistencia);

    (function($){
        $.fn._show = function(){
            $(this).css('visibility', 'visible');
        };
        $.fn._hide = function(){
            $(this).css('visibility', 'hidden');
        };
    })(jQuery);
</script>
<dialog id="consultaExistenciaProducto">
    <div id="dialogo_existencias_print_area" >

    <div class="dialogo_existencia_flexRow noprint" style="align-items: center">

        <div class="flexItem">
            <label style="font-family:monospace; background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; display:inline-block; width:75px;padding: 2.5px;" for="dialogo_existencia" class="bold lbl">Grupo:</label><br>
            <div class="InputAddOn">
                <select class="notSelectize" id="dialog_existencia_grupo" name="dialog_existencia_grupo">
                    <option></option><option>Clavel</option><option>Coyuya</option><option value="''">(sin grupo)</option></select>
            </div>
        </div>
        <div class="flexItem">
            <label style="font-family:monospace; background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; display:inline-block; width:75px;padding: 2.5px;" for="dialog_bodega" class="bold lbl">Bodega:</label><br>
            <div class="InputAddOn">
                <input style="border-radius:8px" name="dialog_bodega" id="dialog_bodega" type="text" autocomplete="off" class="inputEntrada" data-campo="bodega" value="" />
                <input name="dialog_bodega_id" id="dialog_bodega_id" type="hidden" data-campo="bodega_id" value=""/>
                <span class="vx_icon vx_icon_close" id="icon_clean_bodega" title="Limpiar bodega" onclick="dialogConsultarExistencia.limpiar('dialog_bodega');" style="visibility: hidden; "></span>
            </div>
        </div>
        <div class="flexItem">
            <label style="font-family:monospace; background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; display:inline-block; width:75px;padding: 2.5px;" for="dialog_producto" class="bold lbl">Producto:</label><br>
            <div class="InputAddOn">
                <input style="border-radius:8px" name="dialog_bodega" id="dialog_producto" type="text" autocomplete="off" class="inputEntrada" data-campo="producto" value="" />
                <input name="dialog_producto_id" id="dialog_producto_id" type="hidden" data-campo="producto_general_id" value=""/>
                <span class="vx_icon vx_icon_close" id="icon_clean_producto" title="Limpiar producto" onclick="dialogConsultarExistencia.limpiar('dialog_producto');" style="visibility: hidden; "></span>
            </div>
        </div>
        <div class="flexItem">
                <label> <input type='radio'  name='dialogo_existencia_orden_color' value='' checked="checked"> Usual</label> 
                <label> <input type='radio'  name='dialogo_existencia_orden_color' value='asc' > &darr;A</label> 
                <label> <input type='radio' name='dialogo_existencia_orden_color' value='desc' > &uarr;A</label>
                <br>
            <label style="font-family:monospace; background-color:#c9dfef; border-bottom-style: groove; border-radius:5px; display:block; width:50px;padding: 2.5px;" for="dialog_color" class="bold lbl">Color:  </label>
                

            <div class="InputAddOn">
                <input style="border-radius:8px" name="dialog_color" id="dialog_color" type="text" autocomplete="off" class="inputEntrada" data-campo="color" value=""/>
                <input name="dialog_color_id" id="dialog_color_id" type="hidden" data-campo="color_id" value=""/>
                <span class="vx_icon vx_icon_close" id="icon_clean_color" title="Limpiar color" onclick="dialogConsultarExistencia.limpiar('dialog_color');" style="visibility: hidden;"></span>
            </div>
        </div>
        <div class="flexItem">
            <input id="dialogo_existencia_todo" value='todo' type="checkbox"><label for="dialogo_existencia_todo"> All</label><br>
            <input id="dialogo_existencia_saldo" value='Si' type="checkbox"><label for="dialogo_existencia_saldo"> Saldo</label>
            <input id="dialogo_existencia_lento" value='Si' type="checkbox"><label for="dialogo_existencia_lento"> Lento</label>
        </div>
        <div class="flexItem">Print<br><span title="Imprimir" style="color:#beb110; cursor: pointer;font-size:2.5em" onclick="dialogConsultarExistencia.print()">&#9113;</span></div>
        <!--
        <div class="flexItem">PDF<br><span title="PDF" style="color:red;cursor: pointer;font-size:2.5em" onclick="dialogConsultarExistencia.pdf()"><i class="icofont-file-pdf"></i></span></div>
        -->
    </div>
        <div style='clear:both;text-align:center;margin-bottom:2em;display:flex;justify-content:flex-start;'>
            <label class='totalizador_casset_boton'><input type="radio" name="dialogo_existencia_casset" value="first" class="radioLabelOnly">⏮</label>
            <label class='totalizador_casset_boton'><input type="radio" name="dialogo_existencia_casset" value="prev" class="radioLabelOnly">⏴</label>
            <label class='totalizador_casset_boton'><input type="radio" name="dialogo_existencia_casset" value="next" class="radioLabelOnly">⏵</label>
            <label class='totalizador_casset_boton'><input type="radio" name="dialogo_existencia_casset" value="last" class="radioLabelOnly">⏭</label>
        </div>


    <table style="align-items: center;" align="center"  id="tabla_consulta_existencia">
        <caption style="background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; 
            width: 90%; margin-left: auto; margin-right:auto; text-align:center;"
        >Seleccione: la bodega, el producto y/o color a consultar</caption>
        <thead>
        <tr class="printOnly">
            <th colspan="6" style="font-weight: bold;text-align: center" id="dialog_existencia_th_title"></th>
        </tr>
            <tr>
                <th>
                    <span style='cursor:pointer;font-size:2em;color:blue;user-select: none;' class="noprint" id='dialogo_existencia_swap' title='Cambia a: Producto / Bodega / Color' onclick='dialogConsultarExistencia.reGroupBy()'><span style='font-size:0.5em'>⦽</span></span>
                    <span id='dialogo_existencia_ordena'>
                        <span class='totalizador_level_menu' onClick="showLevel(1)">Producto</span> / <span class='totalizador_level_menu' onClick="showLevel(2)">Color</span> / <span class='totalizador_level_menu' onClick="showAll()">Bodega</span>
                    </span>
                <th style='width:10em;' class="der">Rollos</th>
                <th colspan="2" style='width:12em;  class="der"'>Quantity</th>
                <th colspan="2">
            </tr>
             <tr class="totales" id="totales">
                <th colspan="4" id="label_consultando_existencia">Seleccione su búsqueda</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot id="dialog_existencia_footer">
        </tfoot>
    </table>
    </div>
</dialog>


CODE_DIALOGO_EXISTENCIAS;

